<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>HTML Example</TITLE>
     <link rel="stylesheet" type="text/css" href="../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<h1 align="center"><span class="pagetitle">HTML Emulation of CSS Example</span><br>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../misc/email.htm">Brian Wilson</a> =</font></h1>

<div align="center">
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../index.html">Main Index</a> |
        <a href="../propindex/font.htm">Property Index</a> |
        <a href="../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>

<a href="#example">Example</a> | <a href="#analysis">Analysis</a>
</div>

<br><br>
<a name="example"></a>
<big><b class="mainheading">Example</b></big>
<ol>
<li>&#160;&#160;&#160;&#160;&#160;&#160;&lt;<b class="tagname">html</b>&gt;

<li>&#160;&#160;&#160;&#160;&#160;&#160;&lt;<b class="tagname">head</b>&gt;

<li>&#160;&#160;&#160;&#160;&#160;&#160;
    &#160;&#160;&#160;&#160;&#160;&#160;&lt;<b class="tagname">title</b>&gt;Document
    Title&lt;/<b class="tagname">title</b>&gt;

<li>&#160;&#160;&#160;&#160;&#160;&#160;&lt;/<b class="tagname">head</b>&gt;<br><br>

<li><a name="e5" href="#a2"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &lt;<b class="tagname">body</b>
    <span class="tagattrib">BGCOLOR</span>=&quot;#000000&quot;
    <span class="tagattrib">TEXT</span>=&quot;#80c0c0&quot;
    <span class="tagattrib">LINK</span>=&quot;#ff8080&quot;
    <span class="tagattrib">VLINK</span>=&quot;#ff0000&quot;
    <span class="tagattrib">ALINK</span>=&quot;#a05050&quot;&gt;

<li><a name="e6" href="#a3"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &lt;<b class="tagname">div</b>
    <span class="tagattrib">ALIGN</span>=&quot;center&quot;&gt;<br>

<li><a name="e7" href="#a4"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &lt;<b class="tagname">table</b> <span
    class="tagattrib">BGCOLOR</span>=&quot;#000080&quot; <span class="tagattrib">BORDER</span>=3
    <span class="tagattrib">BORDERCOLOR</span>=&quot;#0000ff&quot;&gt;&lt;<b
    class="tagname">tr</b>&gt;<br>

<li><a name="e8" href="#a5"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &#160;&#160;&#160;&#160;&#160;&#160;&#160;
    &lt;<b class="tagname">td</b>&gt;&lt;<b class="tagname">h1</b>&gt;&lt;<b
    class="tagname">font</b> <span class="tagattrib">FACE</span>=&quot;courier&quot;
    <span class="tagattrib">SIZE</span>=6&gt;&lt;<b class="tagname">font</b>
    <span class="tagattrib">SIZE</span>=7&gt;W&lt;/<b class="tagname">font</b>&gt;ELCOME
    TO MY HOME PAGE!&lt;/<b class="tagname">font</b>&gt;&lt;/<b
    class="tagname">h1</b>&gt;&lt;/<b class="tagname">td</b>&gt;<br>

<li>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/<b class="tagname">tr</b>&gt;&lt;/<b
    class="tagname">table</b>&gt;<br>

<li>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/<b class="tagname">div</b>&gt;

<li>&#160;&#160;&#160;&#160;&#160;&#160;&lt;<b class="tagname">br</b>&gt;&lt;<b
    class="tagname">br</b>&gt;

<li><a name="e12" href="#a6"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &lt;<b class="tagname">p</b>&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Hi
    there! If you are reading this then you have found my home page!
    Congratulations! I know it can be hard to find my pages, but I
    bet that you feel lucky now. Now that you are here, please take a look at my page
    of links to &lt;<b class="tagname">a</b>
    <span class="tagattrib">HREF</span>=&quot;http://www.mysite.com/coolsites.html&quot;&gt;cool
    sites&lt;/<b class="tagname">a</b>&gt; or sign my
    &lt;<b class="tagname">a</b>
    <span class="tagattrib">HREF</span>=&quot;http://www.mysite.com/guestbook.html&quot;&gt;guest
    book&lt;/<b class="tagname">a</b>&gt;&lt;/<b class="tagname">p</b>&gt;

<li><a name="e13" href="#a7"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &lt;<b class="tagname">div</b>&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;<b class="tagname">b</b>&gt;&lt;<b
    class="tagname">font</b> <span class="tagattrib">SIZE</span>=6
    <span class="tagattrib">COLOR</span>=&quot;#ffffff&quot;&gt;M&lt;/<b class="tagname">font</b>&gt;y
    wonderful poetry&lt;/<b class="tagname">b</b>&gt; is available if you are
    REALLY bored. Why not give it a spin?&lt;/<b class="tagname">div</b>&gt;
<br><br>

<li><a name="e14" href="#a8"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &lt;<b class="tagname">h2</b>&gt;&lt;<b class="tagname">font</b>
    <span class="tagattrib">SIZE</span>=7 <span class="tagattrib">COLOR</span>=&quot;#00ff00&quot;&gt;
    The Best Poetry I &lt;<b class="tagname">em</b>&gt;&lt;<b
    class="tagname">b</b>&gt;NEVER&lt;/<b class="tagname">b</b>&gt;&lt;/<b
    class="tagname">em</b>&gt; Wrote&lt;/<b class="tagname">font</b>&gt;&lt;/<b
    class="tagname">h2</b>&gt;

<li>&#160;&#160;&#160;&#160;&#160;&#160;&lt;<b class="tagname">ul</b>&gt;

<li><a name="e16" href="#a9"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &#160;&#160;&#160;&#160;&lt;<b class="tagname">li</b>&gt;'There Once
    Was A Man From Nantucket' - &lt;<b class="tagname">font</b>
    <span class="tagattrib">FACE</span>=&quot;'comic sans ms', fantasy&quot;
    <span class="tagattrib">COLOR</span>=&quot;#ffff00&quot;&gt;Anonymous&lt;/<b
    class="tagname">font</b>&gt;&lt;/<b class="tagname">li</b>&gt;

<li><a name="e17" href="#a9"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &#160;&#160;&#160;&#160;&lt;<b class="tagname">li</b>&gt;'Cool In Fur' -
    &lt;<b class="tagname">font</b> <span class="tagattrib">FACE</span>=&quot;'comic
    sans ms', fantasy&quot; <span class="tagattrib">COLOR</span>=&quot;#ffff00&quot;&gt;Harry
    B. Foot&lt;/<b class="tagname">font</b>&gt;&lt;/<b class="tagname">li</b>&gt;

<li>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
    &lt;<b class="tagname">li</b>&gt;And My All Time Fave:

<li>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
    &lt;<b class="tagname">ul</b>&gt;

<li><a name="e20" href="#a10"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
    &lt;<b class="tagname">li</b>&gt;&lt;<b class="tagname">font</b>
    <span class="tagattrib">SIZE</span>=6&gt;&lt;<b class="tagname">i</b>&gt;
    'A Toast To My Toaster' - <br>

<li><a name="e21" href="#a9"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &#160;&#160;&#160;&#160;&#160;&#160;
    &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;<b class="tagname">font</b>
    <span class="tagattrib">FACE</span>=&quot;'comic sans ms', fantasy&quot;
    <span class="tagattrib">COLOR</span>=&quot;#ffff00&quot;&gt;Me!&lt;/<b
    class="tagname">font</b>&gt;&lt;/<b class="tagname">i</b>&gt;&lt;/<b
    class="tagname">font</b>&gt;&lt;/<b class="tagname">li</b>&gt;

<li>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
    &lt;/<b class="tagname">ul</b>&gt;

<li>&#160;&#160;&#160;&#160;&#160;&#160;&lt;/<b class="tagname">li</b>&gt;&lt;/<b class="tagname">ul</b>&gt;
<br><br>

<li><a name="e24" href="#a11"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &lt;<b class="tagname">table</b> <span
    class="tagattrib">BGCOLOR</span>=&quot;#000080&quot;&gt;&lt;<b class="tagname">tr</b>&gt;

<li><a name="e25" href="#a12"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &#160;&#160;&#160;&#160;&#160;&lt;<b class="tagname">td</b>
    <span class="tagattrib">WIDTH</span>=50&gt;&amp;nbsp;&lt;/<b class="tagname">td</b>&gt;

<li><a name="e26" href="#a13"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &#160;&#160;&#160;&#160;&#160;&lt;<b
    class="tagname">td</b>&gt;&lt;<b class="tagname">font</b>
    <span class="tagattrib">COLOR</span>=&quot;#00ff00&quot;&gt;Brought to you by the letter

<li><a name="e27" href="#a14"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;<b class="tagname">font</b>
    <span class="tagattrib">FACE</span>=&quot;'comic sans ms', fantasy&quot;
    <span class="tagattrib">COLOR</span>=&quot;#ffff00&quot;&gt;&amp;quot;H&amp;quot;&lt;/<b
    class="tagname">font</b>&gt; and &lt;<b class="tagname">u</b>&gt;Joe Shmoe&lt;/<b
    class="tagname">u</b>&gt;&lt;/<b class="tagname">font</b>&gt;&lt;/<b
    class="tagname">td</b>&gt;

<li>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/<b class="tagname">tr</b>&gt;&lt;/<b
    class="tagname">table</b>&gt;
<br><br>

<li><a name="e29" href="#a15"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &lt;<b class="tagname">div</b>&gt;&lt;<b
    class="tagname">b</b>&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;<b
    class="tagname">font</b> <span class="tagattrib">SIZE</span>=6
    <span class="tagattrib">COLOR</span>=&quot;#ffffff&quot;&gt;W&lt;/<b
    class="tagname">font</b>&gt;hen you are done looking through these
    masterpieces, I encourage you to visit my proud sponsor!!
    &lt;/<b class="tagname">b</b>&gt;&lt;/<b class="tagname">div</b>&gt;
<br><br>

<li><a name="e30" href="#a16"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &lt;<b class="tagname">table</b> <span
    class="tagattrib">BGCOLOR</span>=&quot;#ffffff&quot; <span class="tagattrib">BORDER</span>=2
    <span class="tagattrib">BORDERCOLOR</span>=&quot;#0000ff&quot;&gt;&lt;<b
    class="tagname">tr</b>&gt;

<li><a name="e31" href="#a17"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &#160;&#160;&#160;&#160;&#160;&lt;<b class="tagname">td</b>
    <span class="tagattrib">WIDTH</span>=5&gt;&amp;nbsp;&lt;/<b class="tagname">td</b>&gt;

<li><a name="e32" href="#a18"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &#160;&#160;&#160;&#160;&#160;&lt;<b
    class="tagname">td</b>&gt;&lt;<b class="tagname">font</b>
    <span class="tagattrib">SIZE</span>=6&gt;ADVERTISEMENT&lt;/<b
    class="tagname">font</b>&gt; Buy Navel Lint Contemplator! Its a browser and
    its a sandwich spread! Go to our &lt;<b class="tagname">a</b>
    <span class="tagattrib">HREF</span>=&quot;http://www.navellint.com&quot;&gt;home
    page&lt;/<b class="tagname">a</b>&gt; without delay! Why? Because shelf
    life is only 8 hours unless refrigerated. We know that makes it hard to browse,
    but it promotes frequent upgrading to the latest and greatest version.
    &lt;/<b class="tagname">td</b>&gt;

<li>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/<b class="tagname">tr</b>&gt;&lt;/<b
    class="tagname">table</b>&gt;
<br><br>

<li><a name="e34" href="#a19"><img src="../../images/analysis.gif" alt="[Go To Analysis]" align="middle" border=0></a>
    &lt;<b class="tagname">h6</b>&gt;&lt;<b class="tagname">font</b>
    <span class="tagattrib">SIZE</span>=1 <span class="tagattrib">COLOR</span>=&quot;#ff0000&quot;&gt;All
    standard disclaimers apply. Your life depends on NOT copying this document in
    any way. This tape will &lt;<b class="tagname">a</b>
    <span class="tagattrib">HREF</span>=&quot;http://www.mysite.com/selfdestruct.html&quot;&gt;self
    destruct&lt;/<b class="tagname">a</b>&gt; in 10
    seconds...&lt;/<b class="tagname">font</b>&gt;&lt;/<b class="tagname">h6</b>&gt;
    <br><br>

<li>&#160;&#160;&#160;&#160;&#160;&#160;&lt;/<b class="tagname">body</b>&gt;
<li>&#160;&#160;&#160;&#160;&#160;&#160;&lt;/<b class="tagname">html</b>&gt;
</ol>

<br><br>
<a name="analysis"></a>
<big><b class="mainheading">Analysis</b></big>
<ul>
    <li><a name="a1"></a><b class="alert">Line:</b> General<br>
        <b class="alert2">CSS Properties/Issues:</b> NA<br>
        <b class="alert2">Description:</b> We lose a lot here when we attempt
        to kludge CSS behavior with normal HTML. Most of the attempted solutions use FONT
        elements for text formatting and TABLE elements for layout control - with varying degrees
        of success. When using plain HTML, at some point you need to recognize that its
        display control REALLY is small compared to CSS.

    <li><a name="a2"></a><b class="alert">Line:</b> <a href="#e5">5</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/colorbg/bg.htm">background</a>,
        <a href="../properties/colorbg/color.htm">color</a>,
        <a href="../syntax/pseudo/pseudoclass.htm">Pseudo-classes</a><br>
        <b class="alert2">Description:</b> We are using BODY element attributes
        to control hyperlink behavior and text/background appearance for the entire
        document. The lack of state dependent anchor pseudo-classes in HTML makes
        it difficult to create hyperlinks of varying appearance.

    <li><a name="a3"></a><b class="alert">Line:</b> <a href="#e6">6</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/colorbg/bg.htm">background</a>,
        <a href="../properties/font/font.htm">font</a>,
        <a href="../properties/font/fontvariant.htm">font-variant</a>,
        <a href="../properties/border/border.htm">border</a><br>
        <b class="alert2">Description:</b> In the CSS examples we only use an
        H1 in this location. Because we are attempting to create a border on this
        content, we must resort to using a TABLE structure. The original H1 element was centered,
        so we encapsulate the TABLE in a center-aligned DIV element.

    <li><a name="a4"></a><b class="alert">Line:</b> <a href="#e7">7</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/colorbg/bg.htm">background</a>,
        <a href="../properties/font/font.htm">font</a>,
        <a href="../properties/font/fontvariant.htm">font-variant</a>,
        <a href="../properties/border/border.htm">border</a><br>
        <b class="alert2">Description:</b> The opening TABLE tag here uses
        attributes to partially create the border and background effects used in
        the original CSS example. An arbitrary border pixel thickness is used here
        (keyword values not supported) while the 'dashed' border behavior in the
        CSS version is not possible. Problem: The solution of using the BORDERCOLOR
        attribute of the TABLE element has limited browser support. 

    <li><a name="a5"></a><b class="alert">Line:</b> <a href="#e8">8</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/colorbg/bg.htm">background</a>,
        <a href="../properties/font/font.htm">font</a>,
        <a href="../properties/font/fontvariant.htm">font-variant</a>,
        <a href="../properties/border/border.htm">border</a>,
        <a href="../syntax/pseudo/pseudoelement.htm">Pseudo-elements</a><br>
        <b class="alert2">Description:</b> We are able to simulate the
        'font-variant' and 'font-size' properties with simple HTML. Small caps is
        achieved by varying the font size on already capitalized text. The 'line-height'
        portion of the 'font' property is not controllable in HTML. Notice we are
        able to retain the &lt;H1&gt; heading level of the content here.

    <li><a name="a6"></a><b class="alert">Line:</b> <a href="#e12">12</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/margin/marginleft.htm">margin-left</a>,
        <a href="../syntax/pseudo/pseudoelement.htm">Pseudo-elements</a><br>
        <b class="alert2">Description:</b> The CSS version of this P element
        gives a 'margin-left' value to the first line. This can be simulated fairly
        easily in HTML using multiple non-breaking spaces (&amp;nbsp; or &amp;#160;)
        This is a fairly portable and safe solution.

    <li><a name="a7"></a><b class="alert">Line:</b> <a href="#e13">13</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/font/fontweight.htm">font-weight</a>,
        <a href="../properties/margin/marginleft.htm">margin-left</a>,
        <a href="../properties/font/fontsize.htm">font-size</a>,
        <a href="../properties/colorbg/color.htm">color</a>,
        <a href="../syntax/pseudo/pseudoelement.htm">Pseudo-elements</a><br>
        <b class="alert2">Description:</b> The original CSS examples for
        this section employ 'first-line' and 'first-letter' pseudo-elements. The
        first-letter portion can be manually determined, but the first line is
        harder to pin down unless explicitly stated. Our 'font-weight' and 'margin-left' properties used
        for the first line have fair equivalents in HTML: the &lt;b&gt; element and
        non-breaking spaces (see previous analysis point.) HTML only has an on/off
        toggle for applying bold to text, so we are lucky that the original case
        only used this method as well. The styling on the first-letter is again achieved
        through attributes to the FONT element.

    <li><a name="a8"></a><b class="alert">Line:</b> <a href="#e14">14</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/colorbg/bg.htm">background</a>,
        <a href="../properties/colorbg/color.htm">color</a>,
        <a href="../properties/dimension/lineheight.htm">line-height</a>,
        <a href="../properties/font/fontsize.htm">font-size</a>,
        <a href="../properties/font/fontweight.htm">font-weight</a>,
        <a href="../syntax/selectors/element.htm#descendent">Contextual Selectors</a><br>
        <b class="alert2">Description:</b> The original CSS phrase for the H2 element
        is not easy to duplicate in HTML. Line-height and backgrounds for regular elements
        are not controllable in HTML, while the explicit font-size originally used can
        only be approximated with the FONT element (which is also used to create the text
        coloring here.) The nested EM element uses the font-weight property. As mentioned
        in the previous analysis point, HTML only has one bold setting, not the 9 that
        are possible under CSS. We use &lt;B&gt; here, and while this gradient range is
        not as rich as what CSS allows, it gives enough visual distinction from
        surrounding content to be satisfactory.

    <li><a name="a9"></a><b class="alert">Line:</b> <a href="#e16">16</a> /
        <a href="#e17">17</a> / <a href="#e21">21</a> / <a href="#e27">27</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/font/fontfamily.htm">font-family</a>,
        <a href="../properties/colorbg/color.htm">color</a><br>
        <b class="alert2">Description:</b> We are lucky in these examples
        that the only properties originally used control text color and font family,
        because they are easily controlled currently with the FONT element in HTML.

    <li><a name="a10"></a><b class="alert">Line:</b> <a href="#e20">20</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/font/fontsize.htm">font-size</a>,
        <a href="../properties/font/fontstyle.htm">font-style</a><br>
        <b class="alert2">Description:</b> Again we lucked out in regards to the
        original example. The original case used the 'font-size' and 'font-style'
        properties with values that are easily converted to HTML. These properties,
        as well as most of the others, allow other values that are not as easily
        converted to plain HTML. This is where the real power of CSS over HTML
        for specifying layout information becomes apparent.

    <li><a name="a11"></a><b class="alert">Line:</b> <a href="#e24">24</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/colorbg/bg.htm">background</a><br>
        <b class="alert2">Description:</b> We again resort to the use of tables
        to achieve the desired layout characteristics here. The original container
        in the CSS examples was the BLOCKQUOTE element, which we lose here in order to create the desired
        formatting. This is THE most frequent tradeoff when using HTML to layout
        content - loss of structural meaning. Using tables we DO achieve, however,
        the ability to manipulate background colors, borders and a small degree of
        margin control.

    <li><a name="a12"></a><b class="alert">Line:</b> <a href="#e25">25</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/margin/marginleft.htm">margin-left</a><br>
        <b class="alert2">Description:</b> Here we use an initial table cell
        in the row to create a fixed-width left margin of 50 pixels. Our original
        unit measure was centimeters, so the value used is approximate only.

    <li><a name="a13"></a><b class="alert">Line:</b> <a href="#e26">26</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/colorbg/color.htm">color</a><br>
        <b class="alert2">Description:</b> We assign the text color information
        for the original BLOCKQUOTE element here at the cell level using the FONT element.

    <li><a name="a14"></a><b class="alert">Line:</b> <a href="#e27">27</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/font/fontfamily.htm">font-family</a>,
        <a href="../properties/colorbg/color.htm">color</a>,
        <a href="../properties/padding/padding.htm">padding</a>,
        <a href="../properties/border/border.htm">border</a><br>
        <b class="alert2">Description:</b> Our original CSS version contains
        complex padding and border properties to the 'Joe Shmoe' text section. Neither
        of these properties are fully possible with ordinary HTML even when resorting
        to complex table structures. Rather than make the document even more complex,
        we settle for a simple underlining effect.

    <li><a name="a15"></a><b class="alert">Line:</b> <a href="#e29">29</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/colorbg/bg.htm">background</a>,
        <a href="../properties/font/fontweight.htm">font-weight</a>,
        <a href="../properties/margin/marginleft.htm">margin-left</a>,
        <a href="../properties/font/fontsize.htm">font-size</a>,
        <a href="../properties/colorbg/color.htm">color</a><br>
        <b class="alert2">Description:</b> Originally we had a background on
        this element in the CSS version, but that is not possible with HTML. We
        ignore it in this case. We do have the advantage again of being able to kludge
        'first-letter' property effects using the FONT element, and our 'margin-left'
        and 'font-weight' properties similarly degrade nicely to non-breaking spaces
        and &lt;B&gt; elements respectively.

    <li><a name="a16"></a><b class="alert">Line:</b> <a href="#e30">30</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/border/border.htm">border</a>,
        <a href="../properties/colorbg/bg.htm">background</a><br>
        <b class="alert2">Description:</b> We go back to the well again with
        the over-used solution of HTML tables to create equivalent display effects.
        This time we are not so lucky. Many of the original properties used do not
        degrade well to HTML layout attempts. Our original example had numerous display
        properties assigned to the P element, but we are going to lose some: font line-height
        and generic font names disappear. Precise four-side margin control is also out.
        We also lose element background image placement and positioning too. What we end
        up salvaging is the border-style, -size and -color behaviors at the TABLE level.

    <li><a name="a17"></a><b class="alert">Line:</b> <a href="#e31">31</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/margin/margin.htm">margin</a><br>
        <b class="alert2">Description:</b> We use the initial cell of the row
        to again create a left margin effect. Fortunately, the units originally used
        and those possible with HTML are compatible in this example.

    <li><a name="a18"></a><b class="alert">Line:</b> <a href="#e32">32</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/font/font.htm">font</a>,
        <a href="../properties/font/fontvariant.htm">font-variant</a><br>
        <b class="alert2">Description:</b> Our 'ADVERTISEMENT:' banner
        originally had many additional style property assignments (font, font-variant,
        border), most of which can not be achieved using ordinary HTML. We resort
        to just making the text big in this case.

    <li><a name="a19"></a><b class="alert">Line:</b> <a href="#e34">34</a><br>
        <b class="alert2">CSS Properties/Issues:</b>
        <a href="../properties/font/fontsize.htm">font-size</a>,
        <a href="../properties/colorbg/color.htm">color</a><br>
        <b class="alert2">Description:</b> FONT attributes are used here as in
        many of the other parts of this example to achieve equivalent display
        characteristics of the original CSS properties.
</ul>

<br>
<a href="../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</body>
</html>